<!--/* Copyright 2017, Huawei Technologies Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*    http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->

<div class="homecontent center">
    <div class="col-md-12 col-sm-12 col-lg-12">
<h4>{{title}}</h4>
<br>
<br>

<div id="extsysAction" ng-init="init()">

</div>
<br><br>

<table ng-table="controllerTableParams" class="table table-bordered table-striped customtable" show-filter="true">
    <tr ng-repeat="controllerData in $data">
        <!--<td header="'ng-table/headers/checkbox.html'">
            <input type="checkbox" ng-model="checkboxes.items[controllerData.id]" />
        </td>-->
        <td title="'Name'" filter="{ Name: 'text'}" sortable="'Name'">
            {{controllerData.name}}
        </td>
        <td title="'Protocol'" filter="{ Protocol: 'text'}" sortable="'Protocol'">
            {{controllerData.protocol}}
        </td>
        <td title="'Product Name'" filter="{ productName: 'text'}" sortable="'productName'">
            {{controllerData.productName}}
        </td>
        </td>
        <td title="'Type'" filter="{ Type: 'text'}" sortable="'Type'">
            {{controllerData.type}}
        </td>
        <td title="'Vendor'" filter="{ Vendor: 'text'}" sortable="'Vendor'">
            {{controllerData.vendor}}
        </td>
        <td title="'Version'" filter="{ Version: 'number'}" sortable="'Version'">
            {{controllerData.version}}
        </td>
        <td title="'Description'" filter="{ Description: 'text'}" sortable="'Description'">
            {{controllerData.description}}
        </td>
        <td title="'Create Time'" filter="{ createTime: 'number'}" sortable="'createTime'">
            {{controllerData.createTime}}
        </td>
        <td title="'Operation'" filter="{ Operation: 'text'}" sortable="'Operation'">
            {{controllerData.operation}}
        </td>
        <td title="'Action'">
           <!-- <span class="pull-right glyphicon glyphicon-edit" ng-click="editData(controllerData.name)" style="cursor: pointer;margin: 0 5px"></span>
            <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(controllerData.name)" style="cursor: pointer;margin: 0 5px"></span>-->
            <span  ng-click="editData(controllerData.sdnControllerId)" style="cursor: pointer;margin: 0 5px"> <img src="/openoui/framework/browser/thirdparty/images/edit.png" height="15" align="left"/></span>
            <span  ng-click="deleteData(controllerData.sdnControllerId)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
        </td>
    </tr>
</table>

<!--<script type="text/ng-template" id="ng-table/headers/checkbox.html">
    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
</script>-->

<div id="myTable"></div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title">>Add Controller</h5>
            </div>
            <form  name="extsysForm" method="post">
                <div class="modal-body">

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">Name</label>
                        <div id="name" class="col-xs-8">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">URL</label>
                        <div id="url" class="col-xs-8">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">User Name</label>
                        <div id="username" class="col-xs-8">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">Password</label>
                        <div id="password" class="col-xs-8">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">Version</label>
                        <div id="version" class="col-xs-8" >
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">Vendor</label>
                        <div id="vendor" class="col-xs-8" >
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">Description</label>
                        <div id="description" class="col-xs-8" >
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">Protocol</label>
                        <div id="protocol" class="col-xs-8" >
                            <select id="protocolDD" class="form-control inputfield" ng-model="ext.protocol"></select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">Product Name</label>
                        <div id="ProductName" class="col-xs-8" >
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xs-4 col-form-label">Type</label>
                        <div id="type" class="col-xs-8" >
                        </div>
                    </div>

                </div>

                <div id="footerBtns" class="modal-footer">
                    <!--<button type="button" class="btn btn-default" ng-click="addData(province._id)" data-dismiss="modal" ng-disabled="provinceForm.$invalid">OK</button>-->
                    <!--<input type="submit" class="btn btn-default" value="Submit"/>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                </div>
            </form>
        </div>


    </div>
</div>
        </div>
    </div>